import React, { useState } from "react";
import "./index.css";
import { Button ,message} from "antd";
import { Sticky } from "react-vant";
import { useNavigate } from "react-router-dom";
import type { FormProps } from "antd";
import { Form, Input } from "antd";
import { GetLogin } from "../request/api";
type FieldType = {
  username?: string;
  password?: string;
  remember?: string;
};
function Index() {
  let Navigate = useNavigate();
  const home = () => {
    Navigate("/home1");
  };

  const [show, setShow] = useState(false);
  const login = () => {
    setShow(true);
  };
  const guan = () => {
    setShow(false);
  };

  const onFinish: FormProps<FieldType>["onFinish"] = (values) => {
    console.log("Success:", values);
    GetLogin({ username: values.username, password: values.password }).then(
      (res) => {
        console.log(res);

        if (res.data.code === 200) {
          message.success(res.data.msg,2.0)
          localStorage.setItem('token', res.data.token);
          localStorage.setItem('auth',JSON.stringify(res.data.auth));
          Navigate('/home1')
        } else {
          alert("登陆失败");
        }
      }
    );
  };

  const onFinishFailed: FormProps<FieldType>["onFinishFailed"] = (
    errorInfo
  ) => {
    console.log("Failed:", errorInfo);
  };
  return (
    <div className="box">
      <Sticky>
        <div className="header">
          <img className="imgs" src={require("../images/logs.png")} alt="" />
          <span className="sp">创客贴</span>
          <div className="top">
            <div onClick={() => home()}>首页</div>
            <div>定制设计</div>
            <div>创客贴Al</div>
            <div>在线印刷</div>
            <div>下载APP</div>
            <div>···</div>
          </div>
          <div className="inp-top">
            <span className="img-left">
              <img
                src={require("../images/fangdajing.png")}
                alt=""
                className="fangdajing"
              />
            </span>
            <input
              type="text"
              placeholder="2个以及以上关键词描述你"
              className="inp"
            />
            <span className="icon">
              <img
                src={require("../images/xiangji.png")}
                alt=""
                className="xiangji"
              />
            </span>
          </div>




          <div className="right-div">
            <div className="right-div1">
              <img src={require("../images/vip.png")} alt="" className="Vip" />
            </div>
            <div className="right-div2">
              <img src={require("../images/API.png")} alt="" className="Api" />
            </div>
            <Button type="primary" onClick={login}>
              登陆注册
            </Button>
          </div>
        </div>
      </Sticky>
      <div className="boxa">
        <div className="box-left">
          <div>
            简单好用的设计工具
            <p>设计不求人,Ai助你零基础完成专业设计</p>
          </div>

          <button>
            开始设计<span>→</span>
          </button>
        </div>
        <div className="box-right">
          <img src={require("../images/tu.png")} alt="" />
        </div>
        <div className="zhe" style={{ display: show ? "block" : "none" }}>
          <div className="zhe-box">
            <div className="zhe-left">
              <img src={require("../images/guang.png")} alt="" />
            </div>
            <div className="zhe-right">
              <div className="deng">
                <div className="pai">账号密码登陆</div>
                <Form
                  className="inp1"
                  name="basic"
                  labelCol={{ span: 5 }}
                  wrapperCol={{ span: 19 }}
                  style={{ maxWidth: 600 }}
                  initialValues={{ remember: true }}
                  onFinish={onFinish}
                  onFinishFailed={onFinishFailed}
                  autoComplete="off"
                >
                  <Form.Item<FieldType>
                    name="username"
                    rules={[
                      {
                        required: true,
                        message: "Please input your username!",
                      },
                    ]}
                  >
                    <Input />
                  </Form.Item>

                  <Form.Item<FieldType>
                    name="password"
                    rules={[
                      {
                        required: true,
                        message: "Please input your password!",
                      },
                    ]}
                  >
                    <Input.Password />
                  </Form.Item>
                  <div className="yan">
                    <span style={{color:"#0673FC"}}>手机验证码登陆</span>
                    <span>忘记密码</span>
                  </div>
                  <Form.Item wrapperCol={{ offset: 0, span: 5 }}>
                    <Button type="primary" htmlType="submit">
                      登陆
                    </Button>
                  </Form.Item>
                </Form>
              </div>
              <div>
                <img
                  src={require("../images/deng1.png")}
                  alt=""
                  className="deng1"
                />
              </div>
              <div className="guan" onClick={guan}>
                X
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

export default Index;
